<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas {
      /* border: 1px solid; */
    }
  </style>
</head>
<body>
  <!-- 
    canvas可以把图片或视频的某一帧绘制到canvas上

    ctx.drawImage(img, 开始绘制的位置x, 开始绘制的位置y)
      三个参数
        将图片原比例绘制在canvas的x y 开始位置
    ctx.drawImage(img, 开始绘制位置x, 开始绘制位置y, 绘制宽度, 绘制高度)
      五个参数
        将图片从canvas的xy开始绘制，缩放成宽高的图片大小
    ctx.drawImage(img, 图片起点x, 图片起点y, 裁切宽度, 裁切高度, canvas开始位置x, canvas开始位置y, 绘制宽度, 绘制高度)
      用于裁切图片

  -->
  <!-- <img src="./img/1-1_05.jpg" alt=""> -->
  <video controls width="300" src="./ad.mp4"></video>
  <canvas></canvas>
  <script>
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext('2d')
    
    var img = document.querySelector('img')
    /* img.onload = function () {
      canvas.width = img.width
      canvas.height = img.height
      // ctx.drawImage(img, 100, 100)
      // ctx.drawImage(img, 0, 0, 100, 100)
      ctx.drawImage(img, 0, 160, 100, 100, 0, 0, 100, 100)
    }
   */

    var video = document.querySelector('video')
    video.oncanplay = function () {
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      ctx.drawImage(video, 0, 0)
    }
    video.ontimeupdate = function () {
      ctx.drawImage(video, 0, 0)
    }
  </script>
</body>
</html>